<!DOCTYPE html>
<html>
	<head>
		<title>Home</title>
		<!--bootstarp-css-->
		<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
		<!--/bootstarp-css -->
		<!--css-->
		<link rel="stylesheet" href="../css/style.css" type="text/css" media="all" />
		<link href="../css/hover.css" rel="stylesheet" media="all">
		<!--/css-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Petcare Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>

		<script src="../js/jquery.min.js"></script>
		<script src="../js/modernizr.custom.js"></script>
		<script src="../js/responsiveslides.min.js"></script>
		<script>
			// You can also use "$(window).load(function() {"
			$(function() {
				$("#slider2").responsiveSlides({
					auto: true,
					pager: true,
					speed: 300,
					namespace: "callbacks",
				});
			});
		</script>
		<style>
			  #yincan{
				      width: 160px;
				      height: 110px;
				      position: absolute;
				      top: 70px;
				      right: 46px;
				      background-color: #fff;
				      display: none;
			  }
			  .aui-info {
			  	position: relative;
			  	width: 100%;
			  	height: 80px;
			  }
			  
			  .aui-img-round {
			  	width: 80px;
			  	height: 80px;	  
			  	border: 1px #ccc solid;
				margin-top: -15px;
			  }
			  
			  .fileInput { 
			      height: 80px;
			      position: absolute;
			      top: 25px;
			      bottom: 300px;
			      left: 95px;
			      opacity: 0;
			      display: block;
			      width: 80px;
			      clear: both;
			      display: block;
			      margin: auto;
			      background-color: red;
			  }
		</style>
	</head>
	<body>
		<!--header-->
		<div class="header">
			<!-- <ul class="login">
		<li><a href="login.html">登录</a></li>
		<li><a>|</a></li>
		<li><a href="login.html">注册</a></li>
		<li><a>|</a></li>
		<li><a href="login.html">注销</a></li>
	</ul> -->
			<div class="header-info">
				<div class="container">
					<div class="logo">
						<a href="index.html"><img src="../images/logo-pet.png" style="position: absolute;width: 330px;height: 262px;top: -60px;left: 280px;"/></a>
					</div>
					<div class="search-box">
						<form>
							<input type="text" name="s" class="textbox" placeholder="Search" required="">
							<input type="submit" value="">
						</form>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="header-bottom">
				<div class="menu">
					<span class="menu-info"> </span>
					<ul class="cl-effect-21">
						<li id="oneser"><a id="service" href="index.html" class="active">服务中心</a>
							<div id="yican">
								<div>
									<p><a href="adopt.html">宠物领养</a></p>
									<p><a href="farmed.html">宠物寄养</a></p>
									<p><a href="notice.html">寻宠|招领</a></p>
								</div>
							</div>
						</li>
					<li><a href="petbaike.html">宠物百科</a></li>
					<li><a href="news.html">宠物新闻</a></li>
					<li><a href="bbs.html">宠物论坛</a></li>
						<li><a>关于我们</a></li>
						<li id="twoser">
							<a id="myme">个人中心</a>
							<div id="yincan">
								<div>
									<p><a href="myinfo.html">我的</a></p>
									<p><a id="overpet">注销</a></p>
								</div>
							</div>
						</li>
					</ul>
				</div>

				<!--yican -->
				<script>
					$("#service").mouseenter(function() {
						$("#yican").css("display", "block");
					});
					$("#oneser").mouseleave(function() {
						$("#yican").css("display", "none");
					});
					$("#myme").mouseenter(function(){
						$("#yincan").css("display","block");
					});
					$("#twoser").mouseleave(function(){
					$("#yincan").css("display","none");
					});
					//注销
					$("#overpet").click(function(){
						if(!confirm('是否确定注销该用户并退出登录？'))
						return;
						$.post('http://localhost:80/ct/remove',function(res){
							if(res){
								location.href='login.html';
							}
						});
					})
					
				</script>
				<!-- /yican -->
				<!--script-nav -->
				<script>
					$("span.menu-info").click(function() {
						$("ul.cl-effect-21").slideToggle("slow", function() {});
					});
				</script>
				<!-- /script-nav -->
				<div class="clearfix"> </div>
			</div>
		</div>

		<div class="container" id="pet-detail" style="margin: 80px auto 50px auto;width: 970px;">
			<span class="label label-warning hidden-xs" style="float: right;margin-right: 70px;">求抱走</span>
			<div class="form-wrapper white-container" style="margin-top: 40px;">	
				<form id="form1" method="post" enctype="multipart/form-data">
						<div class="aui-info">
							<div style="width: 10%;float: left;margin-top: 5px;">选择图片：</div>
							<div style="position: relative;">
								<img src="../images/pet-avatar.png"  id="img-adopt" class="aui-img-round user-img" />
								<input type="file" accept="image/*" id="file-adopt" name="file"
									onchange="upload('#file-adopt', '#img-adopt');" class="fileInput" value="" />
							</div>
						</div>
						<div class="aui-info">
							   <div style="width: 10%;float: left;margin-top: 5px;">选择宠物:</div>
							   <div>
							   	<select name="myPet" id="mypetinfo" class="form-control" style="width: 300px;">
							   		<option value="0">请选择</option>	
							   	</select>
							   </div>			
						</div>
						<div class="aui-info">
							    <div style="width: 10%;float: left;margin-top: 5px;">领养地址：</div>
								<div style="float: left;width: 85%;">
									<input type="text" id="address" class="form-control" value="" />
								</div>			
						</div>
						<div class="aui-info">
							    <div style="width: 10%;float: left;margin-top: 5px;">联系人:</div>
								<div style="float: left;width: 85%;">
									<input type="text" id="alxr" class="form-control" value="" />
								</div>			
						</div>
						<div class="aui-info">
							    <div style="width: 10%;float: left;margin-top: 5px;">手机号:</div>
								<div style="float: left;width: 85%;">
									<input type="text" id="aphone" class="form-control" value="" />
								</div>			
						</div>
						<div class="aui-info">
							    <div style="width: 10%;float: left;margin-top: 5px;">标题:</div>
								<div style="float: left;width: 85%;">
									<input type="text" id="atitle" class="form-control" value="" />
								</div>			
						</div>
						<div class="aui-info">
							    <div style="width: 10%;float: left;margin-top: 5px;">详情描述:</div>
								<div style="float: left;width: 85%;">
									<textarea rows="4" name="content" id="adetail" class="form-control"
										placeholder="描述为何求领养，及其家中宠物情况。"></textarea>
								</div>			
						</div>
						<div class="aui-info">
							    <div style="width: 20%;    margin: 30px 0 0 100px;">
									<button class="btn btn-success btn-lg" style="width:100px;outline: none;">发布</button>
								</div>	
						</div>
						
					</div>	
					
				</form>
			</div>
		</div>

		<!--/header-->

		<!--footer-->
		<div class="footer">
			<div class="container">
				<div class="copy-rights">
					<p>Copyright &copy; 2023.Company <a target="_blank" href="index.html">you宠</a></p>
				</div>

			</div>
		</div>
		<!--/footer-->
		<script type="text/javascript">
			$(function(){
				//显示我的宠物
				mypetinfo();
				function mypetinfo(){
					$.post('http://localhost:80/ct/mypetinfo2',{"status":0},function(r){
						$("#mypetinfo").children().first().siblings().remove();
					   $(r.records).each(function(i,e){
						   let ops ="<option value='"+e.upid+"'>"+e.upname+"</option>";
						   $("#mypetinfo").append(ops);
					   })
					},"json");							
				}
			
			   //显示我的信息
			   myinfo();
			function myinfo(){
			  	$.post('http://localhost:80/ct/userdetail',{"uid":0},function(r){
					console.log(r);
			  		$("#address").val(r.faddress);
					$("#alxr").val(r.username);
					$("#aphone").val(r.phone);
			  	},"json");							
			  }
			  			
			})
	      
		  //图片上传 修改信息
		$("#form1").submit(function(event) {
		  	event.preventDefault(); //阻止表单提交	
		  	let address = $("#address").val();
		  	let phone = $("#aphone").val();
		  	let alxr = $("#alxr").val();
		  	let atitle = $("#atitle").val();
		  	let adetail = $("#adetail").val();
			let upid = $("#mypetinfo").val();
		  	if (address == '' || phone == '' || alxr == '' || atitle == '' || adetail ==''||upid == 0) {
		  		alert("添加信息不能为空！");
		  		return;
		  	}
		  	//手机格式验证
		  	var telStr = /^[1]([3-9])[0-9]{9}$/;
		  	if (!(telStr.test(phone))) {
		  		alert("手机格式不规范！");
		  		return;
		  	}		  
		  	var formData = new FormData();
		  	formData.append("address", address);
		  	formData.append("lxr", alxr);
		  	formData.append("atitle", atitle);
		  	formData.append("phone", phone);
		  	formData.append("detail", adetail);
			formData.append("upid", upid);
		  	let f = document.getElementById('file-adopt');
		  	let f1 = f.files[0];
		  	formData.append("files", f1);
		  	$.ajax({
		  		url: 'http://localhost:80/ct/addadopt',
		  		type: 'post',
		  		data: formData,
		  		contentType: false,
		  		processData: false,
		  		success: function(res) {
		  			console.log(res);
		  			if (res) {
		  				alert("添加成功！");
		  			} else {
		  				alert("添加失败！");
		  			}
					location.href='adopt.html';
		  		}
		  	})
		  })
	   
	
	</script>
		
		
		<!-- 图片预览 -->
		<script type="text/javascript">
			var upload = function(c, d) {
				"use strict";
				var $c = document.querySelector(c),
					$d = document.querySelector(d),
					file = $c.files[0],
					reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(e) {
					$d.setAttribute("src", e.target.result);
				};
			};
		</script>
	</body>
</html>